<template>
  <div>
    <div class="version3">
      <div class="portaDoctorInfo-page">
        <div class="header">
          <div class="header-background-image">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-header-background.png" class="background-image">
            <div size="small" class="setting" ref="button" @click="popupVisible = !popupVisible">设置</div>
          </div>
          <div class="image-buy" @click="goToPage('./memberList')">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_avatar.png" class="content-image">
          </div>
        </div>
        <div class="qudao-container" @click="goToPage('./memberList')">
          <span class="qudao-suffix">渠道商：</span><span class="qudao-name" id="name">{{info.channelName}}</span>
        </div>
        <div class="info bottom-border">
          <div class="info-detail" >
            <ul @click="goToPage('./list')">
              <li class="info-detail-header">订单数</li>
              <li class="info-detail-content" id="myOrderNum" style="color:#8FCEF0;">{{info.channelOrderNumber}}</li>
            </ul>
          </div>
          <div class="line-vertical"></div>
          <div>
            <ul>
              <li class="info-detail-header">获得积分</li>
              <li class="info-detail-content" id="myPoint">{{info.channelCredit}}</li>
            </ul>
          </div>
          <div class="line-vertical"></div>
          <div>
            <ul>
              <li class="info-detail-header">已返积分</li>
              <li class="info-detail-content" id="donePoint">{{info.channelReturnCredit }}</li>
            </ul>
          </div>
          <div class="line-vertical"></div>
          <div>
            <ul>
              <li class="info-detail-header">已有团队</li>
              <li class="info-detail-content" id="myPartnerNum">{{info.channelTeamNumber}}</li>
            </ul>
          </div>
        </div>
        <div class="qr-content" @click="goToPage('./memberList')" style="color:#8FCEF0;">
          <div class="item-header" id="goToQr">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/ic_supervisor_account.png" class="icon-name">会员列表
          </div>
        </div>

        <div class="qr-content" @click="goToPage('/activity')" style="color:#8FCEF0;">
          <div class="item-header" id="">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/ic_contacts.png" class="icon-name">推广中心
          </div>
        </div>

          <div class="qr-content" @click='goQr' style="color:#8FCEF0;">
          <div class="item-header" id="goToQr" >
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_bank.png" class="icon-name">专属二维码
          </div>
        </div>
        <div class="content">
          <div class="item-header" style="color:#8FCEF0;" @click="goToPage('./lowerChannel')">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/ic_supervisor_account.png" class="icon-name" >我的团队
          </div>
          <div class="team-container bottom-border">
            <div class="team-detail" >
              <ul>
                <li class="team-detail-suffix" >我的团队1：</li>
              </ul>
            </div>
            <div @click="goToPage('./lowerChannel')">
              <ul>
                <li class="team-detail-header">获得积分</li>
                <li class="team-detail-content" id="firstChannelPoint">{{info.firstLevel.credit}}</li>
              </ul>
            </div>
            <div class="item-line-vertical"></div>
            <div @click="goToPage('./lowerChannel')">
              <ul>
                <li class="team-detail-header">已有团队</li>
                <li class="team-detail-content" id="firstPartnerNum">{{info.firstLevel.teamNumber }}</li>
              </ul>
            </div>
          </div>
          <div class="team-container">
            <div class="team-detail">
              <ul>
                <li class="team-detail-suffix">我的团队2：</li>
              </ul>
            </div>
            <div>
              <ul>
                <li class="team-detail-header">获得积分</li>
                <li class="team-detail-content" id="secondChannelPoint">{{info.secondLevel.credit}}</li>
              </ul>
            </div>
            <div class="item-line-vertical"></div>
            <div>
              <ul>
                <li class="team-detail-header">已有团队</li>
                <li class="team-detail-content" id="secondPartnerNum">{{info.secondLevel.teamNumber }}</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="apply-container">
          <div class="item-header">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/ic_contacts.png" class="icon-name">申请我的团队
          </div>
          <div class="apply-item-name bottom-border">
            <input type="text" name="" class="input-control" placeholder="请输入姓名" id="partnerName" v-model="team.name">
          </div>
          <div class="apply-item-name border-bottom-solid">
            <input type="text" name="" class="input-control" placeholder="请输入电话" id="partnerMobile" v-model="team.phone">
          </div>
          <div class="submit-container" id="creatPartnerBtn" @click="submit">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_submit.png" class="submit-image">
          </div>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" class="mint-popup-1" :style="{ top: buttonBottom + 10 + 'px' }">
      <mt-cell title="修改密码" to="/doctor/resetPassword" is-link></mt-cell>
      <!-- <mt-cell title="补充信息" to="//github.com" is-link></mt-cell> -->
    </mt-popup>
  </div>
</template>
<script>
import { wxshare } from 'common/mixin'
import { mapActions } from 'vuex';
import { checkPhone, checkZhName, checkpw } from 'common/utils'
import { MessageBox, Indicator, Toast } from 'mint-ui';

export default {
  mixins: [wxshare],
  data() {
    return {
      info: {
        secondLevel: {

        },
        firstLevel: {

        }
      },
      team: {
        name: '',
        phone: ''
      },
      buttonBottom: 0,
      popupVisible: false
    }

  },
  methods: {
    ...mapActions({
      getDoctorInfo: 'GetDoctorInfo',
      channelApply: 'ChannelApply'
    }),
    goQr() {
      this.$router.push({ path: './portalQr' });
    },
    goInfo() {
      this.$router.push({ path: '/personalCenter' })
    },
    goToPage(page) {
      this.$router.push({ path: page })
    },
    clearTeam() {
      this.team = {
        name: '',
        phone: ''
      }
    },
    submit() {
      if (!checkZhName(this.team.name)) {
        Toast('请先填写真实姓名');
        return false;
      }
      if (!checkPhone(this.team.phone)) {
        Toast('请先填写正确的手机号！');
        return false;
      }
      Indicator.open();
      this.channelApply({ phone: this.team.phone, userName: this.team.name }).then(result => {
        let opt = this;
        Indicator.close();
        MessageBox.alert("您的团队申请成功，请等待后台审核！", '温馨提示').then(action => {
          opt.clearTeam();
        });
      }).catch(msg => {
        Indicator.close();
        Toast(msg);
      })
    }
  },
  created() {
    this.getDoctorInfo().then(data => {
      this.info = data.data;
    }).catch(msg => {

    })
  },
  mounted() {
    this.buttonBottom = this.$refs.button.getBoundingClientRect().bottom;
  }
}

</script>
<style lang="less">
.setting {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  color: #9B9B9B;
  font-size: 0.8rem;
}

.mint-popup-1 {
  width: 150px;
  border-radius: 8px;
  padding: 10px;
  transform: translate(2rem, 0);
  h1 {
    font-size: 20px;
    color: #26a2ff;
  }
  p {
    margin-bottom: 10px;
  }
}

.mint-popup-1::before {
  triangle: 10px top #fff;
  content: '';
  position: absolute;
  top: -20px;
  right: 50px;
}

.mint-cell-wrapper {
  background-image: none;
}

@import './info';

</style>
